<!--
 * @description  : 案件-在线案件-案件详情信息
 * @descriptionDetail: 案件-在线案件-案件详情信息
 * @copyright    : 浙江烟草
 * @author       : sy
 * @create       : 2022-08-25 15:43:11
-->
<template>
  <view class="page">
    <theme-navbar :isWhite="true" backText="返回" title="案件信息"></theme-navbar>
    <view class="content content-bg ifn-content">
      <view class="base-info">
        <view class="new-info" v-show="!baseInfoShow">
          <u-button plain size="mini" class="btn-lay" type="primary" @click="collaborationClick()">
            <u-icon name="grid" size="34"></u-icon>协同办案
          </u-button>
          <view class="new-info-title">
            信息待填写
          </view>
        </view>
        <view class="mini-title" v-show="baseInfoShow">
          案件编号
        </view>
        <view class="case-code-lay" v-show="baseInfoShow">
          <view class="case-code">
            1506210202020101
          </view>
          <u-button plain size="mini" class="btn-lay" type="primary" v-if="!isOnlineCase" @click="collaborationClick()">
            <u-icon name="grid" size="34"></u-icon>协同办案
          </u-button>
        </view>
        <view class="mini-title" v-show="baseInfoShow">
          2020-12-12 14:00:12
        </view>
        <view class="addr-lay" v-show="baseInfoShow">
          <view>盐城市城南新区</view>
          <view>段智</view>
          <view>江尚谦</view>
        </view>
        <view class="reason-lay" v-show="baseInfoShow">
          <view>案由：</view>
          <view>未在当地烟草专卖批发企业进货</view>
        </view>
        <view class="undertaker-lay" v-show="baseInfoShow">
          承办人
        </view>
        <view class="undertaker-content" v-show="baseInfoShow">
          <view>孙玉龙  法字432号,</view>
          <view>刘大宝  法字432号</view>
        </view>
      </view>
 
      <view class="step-lay" @click="addBaseInfo()">
        <view class="step-left-lay">
          <view class="step-left-lay-title">
            基础信息
          </view>
          <view class="step-left-lay-sub-title">
            {{ baseInfoShow?'案件编号、承办人等':'请先填写基本信息' }}
          </view>
        </view>
        <view>
          <u-button plain class="step-right-lay" type="primary" size="mini" v-show="baseInfoShow" @click="updBaseInfo()">
            <view>修改</view>
          </u-button>         
          <u-icon name="arrow-right" size="40" :color="$theme.u_tips_color" v-show="!baseInfoShow"></u-icon>
        </view>
      </view>
      <view class="step-lay1">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              涉案人
            </view>
            <view class="step-left-lay-sub-title">
              添加当事人和同案人
            </view>
          </view>
          <view>
            <u-button plain class="step-right-lay" :disabled="litigantInfo.ownerLess" :type="litigantInfo.ownerLess?'default':'primary'" size="mini" @click="addLitigantInfo()">
              <view>添加</view>
            </u-button>
          </view>
        </view>
        <view class="m-flex-row" style="padding-top: 20rpx; padding-bottom: 20rpx;">
          <text>无主</text>
          <view>
            <u-switch size="40" :disabled="partyList.length>0" v-model="litigantInfo.ownerLess"></u-switch>
          </view>
        </view>
        <u-line style="margin-top: 20rpx; margin-bottom: 20rpx;" :color="$theme.u_border_color"></u-line>
        <view class="step-lay1-content" style="margin-bottom: 10rpx;" v-for="(item,index) in partyList" :key="index">
          <view class="step-lay1-content-left">
            <view>
              <view style="display: flex;flex-direction: row;">
                <text>{{ item.partyName }}</text>
                <text class="step-lay1-content-left-tag">
                  {{ item.roleOfCase == '5301'?'当事人':'同案人' }}
                </text>
              </view>
              <view class="step-lay1-content-left-card">
                证件号码: {{ item.idCard }}
              </view>
            </view>
          </view>
          <view class="step-lay1-content-right" @click="editParty(item)">
            <view>编辑</view>
            <u-icon name="arrow-right" size="38"></u-icon>
          </view>
        </view>
      </view>      
      <view class="step-lay1">
        <view class="step-lay1-head">
          <view class="step-left-lay">
            <view class="step-left-lay-title">
              窝点信息
            </view>
            <view class="step-left-lay-sub-title">
              窝点信息采集
            </view>
          </view>
          <view>
            <u-button plain class="step-right-lay" type="primary" size="mini" @click="editDens('add')">
              <view>添加</view>
            </u-button>
          </view>
        </view>
        <view class="step-lay1-content" style="margin-bottom: 10rpx;">
          <view class="step-lay1-content-left">
            <view>
              <view style="display: flex;flex-direction: row;">
                <text>高新窝点1</text>
              </view>               
            </view>
          </view>
          <view class="step-lay1-content-right" @click="editDens('edit')">
            <view>编辑</view>
            <u-icon name="arrow-right" size="38"></u-icon>
          </view>
        </view>
      </view>			
      <view class="step-lay">
        <view class="step-left-lay">
          <view class="step-left-lay-title">
            运输信息
          </view>
          <view class="step-left-lay-sub-title">
            运输车辆、物流中转站等
          </view>
        </view>
        <view>
          <u-button plain class="step-right-lay" type="primary" size="mini">
            <view>修改</view>
          </u-button>           
        </view>
      </view>
    </view>
    <!-- 涉案人/当事人 弹出层 -->
    <view class="">
      <u-action-sheet :list="sheetList" v-model="actionSheetShow" @click="sheetClick"></u-action-sheet>
    </view>
  </view>
</template>

<script>

export default{
	
  data() {
    return {
      baseInfoShow:false, // 基本信息
      hasSourceRej:false, // 案件来源
      hasLitigantInfo:false, // 当事人
      litigantInfo:{   // 当事人数据
        ownerLess:false, // 是否无主
      },
      styleConfim:{
        background: 'rgba(0, 0, 0, 0.3)',
      },
      sheetList:[
        {
          text:"当事人",
        },
        {
          text:"同案人",
        },
      ],
      actionSheetShow:false,
      isOnlineCase:false, // 是否在线案件
      partyList:[
        {
          partyUuid:"123987241",
          partyName:"江尚谦",
          roleOfCase:'5301',
          partyType:'1',
          idCard:"555555555555",				
        },
        {
          partyUuid:"239757843",
          partyName:"张三",
          roleOfCase:'5302',
          partyType:'1',
          idCard:"666666666666",				
        },
      ], // 当事人/同案人数据
    }    
  },
  computed:{
    
  },
  // 加载初始周期方法
  onLoad(data) {
    this.baseInfoShow = data.baseInfoShow;
    this.isOnlineCase = data.onlineCase;
  },
  methods: {
    collaborationClick:function() {
      
    },
    toPage(item){
      this.$u.route({
        type: "to",
        url: item.url,
      });
    },
    // 基本信息
    addBaseInfo:function(){  
      if(this.hasSourceRej) return;
      // 跳转
      this.$u.route('/pages/case/baseInfo/baseInfo');
    },
    // 修改基本信息
    updBaseInfo:function(){ 
    
    },
    // 添加当事人/同案人
    addLitigantInfo:function(){
      this.actionSheetShow = true;
      if(this.hasLitigantInfo) return;      
      
    },  
    // 新增 当事人/同案人
    sheetClick(index){
      this.$u.route('/pages/case/caseInfoTemp/partyInfo',{roleOfCase: this.ROLE_OF_CASE_CODE[index],});
    },
    // 编辑
    editParty(obj){
      this.$u.route('/pages/case/caseInfoTemp/partyInfo', obj);
    },
    // 窝点
    editDens:function(type){
      this.$u.route('pages/case/caseInfoTemp/densInfo?type=' + type);
    },
  },
}
</script>

<style lang="scss" scoped>
	@import "../case_common.scss";
	.new-info{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 10px;
		.new-info-title{
			color: #999999;
			font-size: .7rem;
			margin-top: 5px;
		}
	}
	.ifn-content{
		padding: 0rpx 5rpx 20rpx !important;
	}
	.base-info{
		padding: 30rpx 30rpx;
		background-color: #fff;
		min-height: 200rpx;
	}
	.mini-title{
		color: #999999;
		font-size: .6rem;
		margin: 10rpx;
	}
	.case-code-lay{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 10rpx;
	}
	.btn-lay{
		margin: 0px 0px;
	}
	.btn-lay::after{
		border: none;
	}
	.case-code{
		color: #333333;
		font-size: 1.2rem;
		padding: 5rpx 0rpx;
		font-weight: bold;
	}
	.addr-lay{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;
		view{
			padding: 10rpx 15rpx;
			font-size: .7rem;
			background-color: #f2f2f2;
			color: #565656;
			margin: 3rpx 5rpx;
			border-radius: 10rpx;
		}
	}
	.reason-lay{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		margin: 20rpx 0rpx;
		font-size: .7rem;
		color: #565656;
		view:first-child{
			color: #999999;
		}
	}
	
	.undertaker-lay{
		font-size: .9rem;
		font-weight: 800;
		margin: 30rpx 0rpx 10rpx;
		color: #333333;
	}
	
	.undertaker-content{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: top;
		font-size: .7rem;
		color: #565656;
		view{
			margin-top: 5rpx;
			margin-bottom: 5rpx;
		}
		view:not(view:last-child){
			margin-right: 15rpx;
		}
	}
	
	.step-lay{
		background-color: #fff;
		margin: 30rpx 40rpx;
		border-radius: 15rpx;
		padding: 30rpx 30rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		.step-left-lay{
			.step-left-lay-title{
				font-size: .9rem;
				font-weight: 700;
				color: #333333;
				
			}
			.step-left-lay-sub-title{
				font-size: .5rem;
				color: #999999;
			}
		}
		.step-right-lay{
			margin: 0px 5px;
			view{
				font-size: .6rem !important;
			}
		}
	}
	
	.step-lay1{
		background-color: #fff;
		margin: 30rpx 40rpx;
		border-radius: 15rpx;
		padding: 30rpx 30rpx;
		.step-lay1-head{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			.step-left-lay{
				.step-left-lay-title{
					font-size: .9rem;
					font-weight: 700;
					color: #333333;
					
				}
				.step-left-lay-sub-title{
					font-size: .5rem;
					color: #999999;
				}
			}
			.step-right-lay{
				margin: 0px;
				view{
					font-size: .6rem !important;
				}
			}
		}
		.step-lay1-content{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			margin-top: 30rpx;
			.step-lay1-content-left{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: flex-start;
				view:first-child{
					font-size: .8rem;
					font-weight: 500;
					color: #333333;
					margin-right: 10rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
				}
				.step-lay1-content-left-tag{
					padding: 3rpx 10rpx;
					border-radius: 20rpx;
					font-size: .6rem;
					color: $u-type-primary;
					margin-left: 10rpx;
					border: 1px solid $u-type-primary;
					background-color: $u-type-primary-light;
				}
				
			}
			.step-lay1-content-right{
				display: flex;
				flex-direction: row;
				justify-content: flex-end;
				align-items: flex-start;
				view:first-child{
					color: #F19833;
					font-size: .7rem;
				}
				view:last-child{
					color: $u-tips-color;
				}
			}
		}
	}
	.space-content{
		height: 150rpx;
	}
	.flat-btn{
		position: fixed;
		bottom: 50rpx;
		margin: auto;
		left: 60rpx;
		right: 60rpx;
	}
	.step-lay1-content-left-card{
		font-size: .6rem;
		font-weight: 300 !important;
  }
  .layer-location{
    .btns{
      width: 80%;
      margin:  0 auto;
      padding: 20rpx 0;
      .con{
        color: rgb(52, 120, 247);
        font-size: 32rpx;
        background-color: #f4f4f5;
        border-color: #f4f4f5;
        border-bottom: 2rpx solid #F2F2F2;
      }
    }
  }
</style>
